Beginner’s Essential 


CSS CHEAT SHEET 


What makes a website unique is its styling. A must-have 
skill for every web developer. 
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Backgrounds 


background 


background-image 
background-position 
background-size 
background-repeat 
background-attachment 
background-origin 
background-clip 


background-color 


background-image 


url 
gradients 


none 


background-position 


top left | top center | top right | center left | center center | 
center right | bottom left | bottom center | bottom right 


x-% y-% 
X-pos y-pos 


background-size 
length 


% 


auto | cover | contain 


background-repeat 
repeat | repeat-x | repeat-y | 


no-repeat 
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background-attachment 


scroll | fixed | local 


background-origin 


border-box | padding-box | content-box 


background-clip 


border-box | padding-box | content-box 


background-color 


color 


transparent 


Border 


border 
border-width 


border-style 


border-color 


border-width 
thin | medium | thick | length 


border-style 
none | hidden | dotted | 


dashed | solid | double | 


groove | ridge | inset | outset 


border-color 
color 


border-bottom 
border-bottom-width 


border-style 


border-color 


border-left 
border-left-width 
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border-style 


border-color 


border-left-style 
border-style 


border-right-color 
border-color 


border-right-width 
thin | medium | thick | length 


border-top-width 
thin | medium | thick | length 


border-break 
border-width 


border-style 
color 


close 


border-bottom-color 


border-color 


border-bottom-style 
border-style 


border-left-color 


border-color 


border-left-width 
thin | medium | thick length 


border-right-style 
border-style 


border-top 
border-top-width 


border-style 


border-color 
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border-top-color 
border-color 


border-top-style 
border-style 


box-shadow 
inset || [ length, length, length, length || <color> ] 


none 


border-collapse 


collapse | separate 


border-image 


image 
[ number / % border-width stretch | repeat | round ] 


none 


border-right 
border-right-width 


border-style 


border-color 


border-radius 


border-radius 
border-top-right-radius 
border-bottom-right-radius 
border-bottom-left-radius 


border-top-left-radius 


border-top-right-radius 
length 


border-bottom-right-radius 
length 


border-bottom-left-radius 
length 
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Box Model 


float 
left | right | none 


height 


auto 

length 

% 
max-height 
none 

length 


% 


max-width 


none 

length% 
min-height 
none 


length 


length 


margin 
margin-top 
margin-right 
margin-bottom 


margin-left 


margin-bottom 
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margin-left 


auto 

height 

% 
margin-right 
auto 

height 

% 
margin-top 
auto 

length 

% 

padding 
padding-top 
padding-right 
padding-bottom 


padding-left 


padding-bottom 
length 


% 


padding-left 
length 


% 


padding-right 
length 


% 
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padding-top 
length 


% 


display 


none | inline | block | inline-block 


inline-flex 


inline-grid | contents | list-item |run-in 
inline-table | table-row-group | table-header-group 
table-footer-group | table-row | table-column-group 


table-cell | table-caption | ruby | 
ruby-base-group | ruby-text-group 


overflow 


visible | hidden | scroll | 
auto | no-display | no-content 
overflow-x 


overflow-y 


overflow-style 


auto | marquee-line | marqueeblock 


overflow-x 


visible | hidden | scroll | 
auto | no-display | no-content 
visibility 


visible | hidden | collapse 


clear 
left | right | both | none 


Font 


font 
font-style 


font-variant 
font-weight 


font-size/line-height 
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table-column 
ruby-text | 


font-family 


caption | icon | menu | messagebox | 


font-size-adjust 


none | inherit 


number 


font-family 


serif | sans-serif | Font Name 


font-style 


normal | italic | oblique | inherit 


font-variant 


normal | small-caps | inherit 


font-size 


xx-small | x-small | small | medium 


smaller | larger | 
inherit 
length 


% 


font-weight 


normal | bold | bolder | lighter | 
700 | 800 | 900 | inherit 


Text 


direction 
ltr | rtl | inherit 


hanging-punctuation 


none | [ start | end | endedge ] 


letter-spacing 


normal 
length 


% 
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small-caption status-bar 
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text-outline 


none 
color 


length 


unicode-bidi 
normal | embed | bidi-override 


white-space 


normal | pre | nowrap | pre-wrap | pre-line 


white-space-collapse 


perserve | collapse | pre-servebreaks | discard 


punctuation-trim 


none | [ start | end | adjacent ] 


text-align 
start | end | left | right | center | justify 


text-align-last 
start | end | left | right | center | justify 


text-decoration 


none | underline | overline | line-thorugh | blink 


text-shadow 


none 
color 


length 


word-break 


normal | keep-all | loose | break-strict | break-all 


word-wrap 


normal 


nowrap 


text-emphasis 
none | [ [ accent | dot | circle | disc | [ before | after ]?] 
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text-indent 
length 


% 


text-justify 


auto | inter-word | interideograph | 


kashida | tibetan 


text-transform 


none | capitalize | uppercase | lowercase 


text-wrap 


normal | unresrricted | none | suppress 


word-spacing 


normal 
length 


% 


Column 


column-count 


auto 


number 


column-fill 


auto | balance 


column-gap 


normal 


length 


column-rule 


column-rule-width 
column-rule-style 


column-rule-color 


column-rule-style 
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inter-cluster distribute 
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border-style 


columns 
column-width 


column-count 


column-rule-width 
thin | medium | thick 


length 


column-span 
1 | all 


column-width 


auto 


length 


Colors 


color 


inherit 
color 


opacity 


inherit 


number 


Table 


border-collapse 


collapse | separate 


empty-cells 


show | hide 


border-spacing 
length length 


table-layout 
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auto | fixed 


caption-side 
top | bottom | left | right 


Speech 


cue 
cue-before 


cue-after 


cue-before 
url [ silent | x-soft | soft | medium | loud | x-loud | none | inherit 


] 
number 


% 


mark 


mark-before 


mark-after 


mark-before 


string 


mark-after 


string 


voice-pitch-range 
x-low | low | medium | high | xhigh | inherit 


number 


voice-stress 


strong | moderate | none | reduced | inherit 


voice-volume 
silent | x-soft | soft | medium | loud | x-loud | inherit 


number 


% 
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cue-after 
url [ silent | x-soft | soft | medium | loud | x-loud | none 


] 
number 


% 


pause 
pause-before 


pause-after 


pause-before 


none | x-weak | weak | medium | strong | x-strong | inherit 
time 

phonemes 

string 

voice-duration 

time 

voice-family 

inherit | [ <specific-voice, age, generic-voice, number> ] 


voice-rate 


x-slow | slow | medium | fast | x-fast | inherit 
% 

voice-pitch 

x-low | low | medium | high | xhigh | inherit 
number 


% 


caption-side 
top | bottom | left | right 


rest 


rest-before 


rest-after 


rest-before 
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inherit 
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none | x-weak | weak | medium | strong | x-strong | inherit 
time 

rest-after 

none | x-weak | weak | medium | strong | x-strong | inherit 
time 

speak 


none | normal | spell-out | digits | literal-punctuation | 
no-punctuation | inherit-number 


List & Markers 


list-style 

list-style-type 

list-style-position 

list-style-image 

list-style-image 

none 

url 

list-style-type 

none | asterisks | box | check | circle | diamond | disc | hyphen | 
square | decimal | decimalleading-zero | lower-roman | upper-roman | 
lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin | 


hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | 
hiragana-iroha | katakana-iroha | footnotes 


marker-offset 


auto 


length 
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Animations 


animations 


animation-name 
animation-duration 
animation-timing-function 
animation-delay 
animation-iteration-count 


animation-direction 


animation-name 
none | IDENT 


animation-duration 


time 


animation-timing-function 
ease | linear | ease-in | easeout | ease-in-out | cubic-Bezier 
(number, number, number, number) 


animation-delay 


time 
animation-iteration-count 
inherit 

number 


animation-direction 
normal | alternate 


animation-play-state 


running | paused 


rotation 


angle 
rotation-point 


position (paired value off-set) 


WebsiteSetup.org - Beginner's CSS Cheat Sheet 


Transitions 


transitions 


transitions-property 
transitions-duration 
transitions-timing-function 


transitions-delay 


transitions-delay 


time 


transitions-duration 


time 


transitions-property 
none | all 


transition-timing-function 


ease | linear | ease-in | ease-out | ease-in-out | cubicBezier ( 
number, number, number, number) 


Ul 


appearance 


normal | inherit | [icon | window | desktop | work-space | document | 
tooltip | dialog | button | push-button | hyperlink | radio-button | 
checkbox | menu-item | tab | menu | menubar | pull-down-menu | 
pop-up-menu | list-menu | radio-group | checkbox-group | outline-tree 
| range | field | combo-box | signature | password] 


cursor 


auto | crosshair | default | pointer | move | e-resize | neresize | 
nw-resize | n-resize | se-resize | sw-resize | swresize | s-resize | 
w-resize | text | wait | help 


ard 


icon 


auto | inherit 


url 
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nav-index 
auto | inherit 


number 


nav-up 
auto | inherit <id> [current | root 


nav-right 


auto | inherit <id> [current | root 


nav-down 


auto | inherit <id> [current | root 


nav-left 


auto | inherit <id> [current | 


root | <target-name> 


resize 


none | both | horizontal | 


vertical | inherit 
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<target-name> 


<target-name> 


<target-name> 
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Pseudo-Class 


: lang allows the author to specify a language to use in a specified element 
:nth-child(n) an element that is the n-th sibling 

:nth-last-child(n) an element that is the n-th sibling counting from the last sibling 
:first-child an element that is the first sibling 


an element that is the last sibling 


an element that is the only child 
an element that is the n-th sibling of its type 


an element that is the n-th sibling of its type counting from the last 
sibling 
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Pseudo-Element 


Adds special style to the first letter of a text 
Adds special style to the first line of a text 


: :before Inserts some content before the content of an element 
::after Inserts some content after the content of an element 


Absolute Measurement 


ee 
Ee 
immer 
=e | pica (1p = 12 points) 
= | pixel (1px = 1/96 inch) 


Relative Measurement 
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me viewport’s height or width, whichever is smaller of the two 
Angles 


=e 
a 
Ce 


Time 


Frequency 


Ly 


kHz kilo-hertz 
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Colors 


fod = r9b(100%,0.0) 
red = rgba(255,0,0,0) 


hsl(hue, saturation, red = hsl (0, 100%, 50%) 
lightness) 


flavor An accent color (typically chosen by the user) to customize 
the user interface of the user agent itself. 

currentColor computer value of the ‘currentColor’ keyword is the 
computed value of the ‘color’ property 


Selector Types 


Name Info Example 


Type Any element of that type hl { text-decoration: 
underline; } 
Grouping Multiple elements of different hl, h2, h3 { font-family: 
types Verdana; } 


Class Multiple elements of different .sampleClass { 
types when you don’t want to text-decoration: 
affect all instances of that type | Underline; } 

A single element type when you | #sampleID { 
don’t want to affect allinstances | text-decoration: 
of that type underline; } 

Descendant An element that is below (in the | #gallery h1 { 
document tree) another element | text-decoration: 
- no matter how many levels underline; } 
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Adjacent Sibling 


General Sibling 


Attribute 


An element that is directly below 
(in the document tree) another 
element 


All elements that share the 
same parent and elements are 
in the same immediate 
sequence 


All elements that share the 
same parent and elements are 
in the same sequence (not 


necessarily immediate) 


An element that matches the 
attribute listed 


#title > p { font-weight: 
bold; } 


hl + p { font-style: 
italic; } 


hl ~ p { font-style: 
italic; } 


E[selected] - att whatever 
the value E[att="val"] - 
att with a specific value 
E[rel~="next"] - att with 
a value is a whitespace 
separated list 
*[lang|="en"] - att value 
either being exactly "val" 
or beginning with "val" 
immediately followed by 
"-" Efatt*="val"] - att 
value that begins with the 
prefix "val" 
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Outline 


outline 


outline-color 
outline-style 


outline-width 


outline-offset 


inherit 
length 


outline-style 


none | dotted | dashed | solid | 


outset 


outline-width 
thin | medium | thick 


length 


3D / 2D Transform 


backface-visibility 
visible | hidden 


perspective 
none 
number 


perspective-origin 
[ [ percentage> | <length> | 


left 


double | 


center 


groove | ridge | inset | 


right ] 


[ <percentage> | 


<length> | top | center | bottom ]? ] <length> ] | [ [ [ left | center 
| bottom ] ] <length> ] 


| right ] || [ top | center 


transform 


none | matrix | matrix3d | translate3d | tranlatexX | 
| scaleX | scaleY | scaleZ | rotate | 
| rotateZ | skewX | skewY | skew | 


translateZ | scale | scale3d 
rotate3d | rotateX | rotateY 
perspective 
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translateY | 
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transform-origin 


[ [ [ <percentage> | <length> | left 
| <length> | top | center | bottom ]? J] <length> ] 
center | right ] || [ top | center | bottom ] ] <length> ] 


transform-style 
flat | preserve-3d 


Generated Content 


bookmark-label 


content 
actr 


string 


bookmark-level 


none 
integer 


bookmark-target 
self 


url 


attr 


border-length 
self 


url 


attr 


content 


normal | none | inhibit 


url 


counter-reset 


none 


identifier number 


crop 
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[ <percentage> 
[ [ [ left 
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auto 
shape 


display 


normal | none | list-item 


float-offset 
length length 


hyphenate-after 


auto 
integer 


counter-increment 


none 


identifier number 


hyphenate-lines 


no-limit 
integer 


hyphenate-resource 


none 


url 


hyphens 


none | manual | auto 


image-resolution 


normal | auto 
dpi 


hyphenate-before 


auto 
integer 


hyphenate-character 


auto 


string 
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2? 


marks 


[crop || cross ] | none 


move-to 


normal | here 
identifier 


page-policy 
start | first | last 


quotes 


none 
string string string string 


string-set 


identifier 
content-list 


text-replace 


none 


[<string> <string>]+ 


Line Box 


alignment-adjust 


auto | baseline | before-edge 


after-edge | textafter-edge 
mathematical 


length 


% 


alignment-baseline 


text-before-edge 


middle 


ideographic | alphabetic | 


central 


hanging | 


baseline | ise-script | beforeedge | text-before-edge | afteredge | 
alphabetic | 


text-after-edge | central | 
hanging | mathematical 


baseline-shift 


baseline | sub | super 


middle | ideographic 
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length 


% 


dominant-baseline 


auto | use-script | no-change | reset-size 
ideographic | mathematical | central 


text-beforeedge 


drop-initial-after-align 


alignment-baseline 


drop-initial-after-align 


central | middle | after-edge | text-after-edge 


alphabetic | mathematical 


% 


drop-initial-before-align 
caps-height 


alignment-baseline 


drop-initial-before-adjust 


before-edge | text-before-edge | central 


mathematical 

length 

% 
drop-initial-value 
initial 

integer 
drop-initial-size 
auto 

integer 

% 

line 


inline-box-align 


initial | last 
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alphabetic 
text-after-edge 


ideographic 
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integer 
line-height 
normal 

number 

length 


% 


line-stacking 


line-stacking-strategy 

line-stacking-ruby 

line-stacking-shift 

line-stacking-strategy 

inline-line-height | block-lineheight | max-height | gridheight 
line-stacking-ruby 


exclude-ruby | include-ruby 


line-stacking-shift 
consider-shifts | disregardshifts 


line-stacking 
line-stacking-strategy 


line-stacking-ruby 
line-stacking-shift 
text-height 

auto | font-size | text-size | 
max-size 


vertical-align 


Baseline | sub | super | top | text-top | middle | bottom | 
text-bottom 


length 


% 
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Hyperlink 


target 


target-name 
target-new 
target-position 


target-name 


current | root | parent | new | 
modal 


string 


target-new 


window | tab | none 


target-position 
above | behind | front | back 


Positioning 


bottom 


auto 
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length 


z-index 


auto 


Number 


position 


static | relative | absolute | fixed 


Ruby 


ruby-align 
auto | start | left | center | end | right | distribute-letter | 
distribute-space | line-edge 


ruby-overhang 


auto | start | end | none 


ruby-position 


before | after | right | inline 


ruby-span 


attr(x) | none 


Paged Media 
fit 
fill | hidden | meet | slice 


fit-position 
[top | center | bottom] || [left | center | right] 


length 
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% 


orphans 


integer 


image-orientation 
auto 

angle 

page 

auto 

identifier 


page-break-after 
auto | always | avoid | left | right 


page-break-before 
auto | always | avoid | left | right 


page-break-inside 


auto | avoid 


size 


auto | landscape | portrait 


length 


windows 


integer 
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